<template>
  <h2>表单封装测试</h2>
  <FormTest />
  <hr>
  <XForm
    :schema="schema"
    :model="model"

    :rules="rules"
    label-width="100px"
  />
</template>

<script lang="ts">
export default {
  name: "Test1",
};
</script>

<script lang="ts" setup>
import { reactive } from "vue";
import XForm from "../components/XForm/index.vue";
import FormTest from "./FormTest.vue";
/* 
key: 唯一标识
span: 栅格数
component: 组件名, 对应不同的element表单项
  input ==> el-input
  select ==> el-select
  cancel-button ==> 取消el-button
  submit-button ==> 提交el-button
label: 左侧标题
model: 收集输入数据的属性名
props: 直接传递给表单项的属性
selectOptions: 用于显示表单项列表的数组
btnText: 按钮文本
handleSubmit: 点击提交按钮的回调
listeners: 包含事件监听的对象
*/
const schema = [
  {
    key: 'username',
    span: 12,
    component: 'input',   // el-input
    label: '用户名',
    model: 'username',
    props: {
      placeholder: '请输入用户名'
    },
  },

  {
    key: 'pwd',
    span: 12,
    component: 'input',
    label: '密码',
    model: 'password',
    props: {
      placeholder: '请输入密码',
      type: 'password'
    },
  },

  {
    key: 'city',
    component: 'select',
    label: '选择城市',
    span: 8,
    model: 'city',
    props: {
      placeholder: '请选择城市',
    },
    selectOptions: [
      {
        label: "武汉",
        value: "wh",
      },
      {
        label: "北京",
        value: "bj",
      },
      {
        label: "深圳",
        value: "sz",
      },
    ]
  },

  {
    key: 'desc',
    component: 'input',
    label: '描述',
    model: 'description',
    props: {
      type: 'textarea',
      rows: 2,
      placeholder: '请输入描述'
    }
  },

  {
    key: 'submit-btn',
    component: 'submit-button',
    span: 2,
    props: {
      type: 'primary',
    },
    btnText: '提交',
    handleSubmit: () => {
      alert('校验通过后发请求' + JSON.stringify(model))
    },
  },

  {
    key: 'cancel-button',
    component: 'button',
    span: 2,
    btnText: '返回2',
    listeners: {
      click: () => alert('返回上一个页面'),
      // xxx: () => {}
    }
  }
]

const model = reactive({
  username: "",
  password: "",
  city: "",
  description: ""
})

const rules = {
  // 表单校验名称必须和数据名称一致
  username: [{required: true, message: '用户名是必须的', trigger: 'blur'}],
  password: [{required: true, message: '密码是必须的', trigger: 'change'}],
}

</script>

<style scoped></style>
